<template>
  <div>
    <!-- 主体开始 -->
	<section class="wid index-one">
		<div>
			<!-- 侧边栏总开始 -->
			<aside class="index-one-left bacpink">
				<!--侧边栏上开始-->
				<div class="index-one-left-name">
					<!-- 侧边栏小标题部分开始 -->
					<div class="index-left-item ">
						<a href="#">
							<div class="open-item">
								<img src="images/index/one_1.png">
								<p>极致精选</p>
								<img src="images/index/gt.png" class="img2" />
							</div>
						</a>
						<!-- 隐藏部分鼠标滑过出现开始 -->
						<div class="index-left-item-right">
							<ul>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
							</ul>
						</div>
						<!-- 隐藏部分鼠标滑过出现结束 -->
					</div>
					<!-- 侧边栏小标题部分结束 -->
					<!-- 侧边栏小标题部分开始 -->
					<div class="index-left-item">
						<a href="#">
							<div>
								<img src="images/index/one_2.png">
								<p>匠心原创</p>
								<img src="images/index/gt.png" class="img2" />
							</div>
						</a>
						<!-- 隐藏部分鼠标滑过出现开始 -->
						<div class="index-left-item-right">
							<ul>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
							</ul>
						</div>
						<!-- 隐藏部分鼠标滑过出现结束 -->
					</div>
					<!-- 侧边栏小标题部分结束 -->
					<!-- 侧边栏小标题部分开始 -->
					<div class="index-left-item">
						<a href="#">
							<div>
								<img src="images/index/one_3.png">
								<p>优雅西点</p>
								<img src="images/index/gt.png" class="img2" />
							</div>
						</a>
						<!-- 隐藏部分鼠标滑过出现开始 -->
						<div class="index-left-item-right">
							<ul>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
							</ul>
						</div>
						<!-- 隐藏部分鼠标滑过出现结束 -->
					</div>
					<!-- 侧边栏小标题部分结束 -->
					<!-- 侧边栏小标题部分开始 -->
					<div class="index-left-item">
						<a href="#">
							<div>
								<img src="images/index/one_4.png">
								<p>乳品系列</p>
								<img src="images/index/gt.png" class="img2" />
							</div>
						</a>
						<!-- 隐藏部分鼠标滑过出现开始 -->
						<div class="index-left-item-right">
							<ul>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
							</ul>
						</div>
						<!-- 隐藏部分鼠标滑过出现结束 -->
					</div>
					<!-- 侧边栏小标题部分结束 -->
					<!-- 侧边栏小标题部分开始 -->
					<div class="index-left-item">
						<a href="#">
							<div>
								<img src="images/index/one_5.png">
								<p>其他系列</p>
								<img src="images/index/gt.png" class="img2">
							</div>
						</a>
						<!-- 隐藏部分鼠标滑过出现开始 -->
						<div class="index-left-item-right">
							<ul>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
							</ul>
						</div>
						<!-- 隐藏部分鼠标滑过出现结束 -->
					</div>
					<!-- 侧边栏小标题部分结束 -->
				</div>
				<!--侧边栏上结束-->
				<!--侧边栏中开始-->
				<div class="index-one-left-2 ">
					&nbsp;
				</div>
				<!--侧边栏中结束-->
				<!--侧边栏下开始-->
				<div class="index-one-left-name">
					<!-- 侧边栏小标题部分开始 -->
					<div class="index-left-item ">
						<a href="#">
							<div>
								<img src="images/index/cake/f7.png">
								<p>茶歇活动</p>
								<img src="images/index/gt.png" class="img2">
							</div>
						</a>
						<!-- 隐藏部分鼠标滑过出现开始 -->
						<div class="index-left-item-right">
							<ul>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
							</ul>
						</div>
						<!-- 隐藏部分鼠标滑过出现结束 -->
					</div>
					<!-- 侧边栏小标题部分结束 -->
					<!-- 侧边栏小标题部分开始 -->
					<div class="index-left-item">
						<a href="#">
							<div>
								<img src="images/index/cake/f1.png">
								<p>节日特供</p>
								<img src="images/index/gt.png" class="img2">
							</div>
						</a>
						<!-- 隐藏部分鼠标滑过出现开始 -->
						<div class="index-left-item-right">
							<ul>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/极地牛乳.png" alt="">
									<span>一见倾心</span>
								</li>
								<li>
									<img src="images/index/一见倾心.png" alt="">
									<span>一见倾心</span>
								</li>
							</ul>
						</div>
						<!-- 隐藏部分鼠标滑过出现结束 -->
					</div>
					<!-- 侧边栏小标题部分结束 -->
				</div>
				<p class="index-blank">
					&nbsp;
				</p>
				<!--侧边栏下结束-->
			</aside>
			<!-- 侧边栏总结束 -->
			<!-- 第一个轮播图开始 -->
			<div id="banner">
				<div id="btn-left"></div>
				<ul id="ul-imgs">
					<li><a href="javascript:;"><img src="images/index/banner1.jpg"></a></li>
					<li><a href="javascript:;"><img src="images/index/banner2.jpg"></a></li>
					<li><a href="javascript:;"><img src="images/index/banner3.jpg"></a></li>
					<li><a href="javascript:;"><img src="images/index/banner4.jpg"></a></li>
					<li><a href="javascript:;"><img src="images/index/banner1.jpg"></a></li>
				</ul>
				<ul id="ul-idxs">
					<li class="active"></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
				<div id="btn-right"></div>
			</div>
			<!-- 第一个轮播图结束 -->
			<div style="clear:both"></div>
		</div>
		<!-- 轮播图下第一区域开始 -->
		<div class="index-two ">
			<!-- 轮播图下第一区域第一块开始 -->
			<div class="index-two-r1 wow bounceInDown  animated" data-wow-delay="0.4s">
				<div class="index-two-r0">
					<div class="index-two-r01"></div>
					<div class="index-two-r02"></div>
					<div class="index-two-r03"></div>
					<div class="index-two-r04"></div>
				</div>
				<img src="images/index/r0.png" class="index-two-r00-img">
			</div>
			<!-- 轮播图下第一区域第一块结束 -->
			<!-- 轮播图下第一区域第2块开始 -->
			<div class="index-two-r  wow bounceInUp animated" data-wow-delay="0.6s"><a href=""><img src="images/index/r2.png" alt=""></a></div>
			<div class="index-two-r wow bounceInDown animated" data-wow-delay="0.9s"><a href=""><img src="images/index/r2.png" alt=""></a></div>
			<div class="index-two-r wow  bounceInUp  animated" data-wow-delay="1.2s"><a href=""><img src="images/index/r2.png" alt=""></a></div>
			<!-- 轮播图下第一区域第2块结束 -->
			<div style="clear:both"></div>
		</div>
		<!-- 轮播图下第一区域结束 -->
	</section>
	<!-- 轮播图下区域1 -->
	<div class="middle-product">
		<!-- 大灰色背景部分1 -->
		<div class="wid">
			<!-- 2中部banner1-1 -->
			<div class="active-banner wow bounceIn animated" data-wow-delay="0.2s">
				<a href="#">
					<img src="images/index/73695233867459470.jpg" alt="">
				</a>
			</div>
			<!-- 2中部banner1-2 -->
			<!-- 3极致精选1 -->
			<div class="index-five-title">
				<div class="index-five-title-l wow fadeInLeft animated" data-wow-delay="0.3s">极致·精选</div>
				<div class="index-five-title-r wow fadeInRight animated" data-wow-delay="0.5s"><a href="#">查看更多</a></div>
				<div class="clearfix"></div>
			</div>
			<!-- 3极致精选2 -->
			<!-- 3极致精选内容1 -->
			<div class="index-five-list">
				<a href="#" class="index-five-list-l  wow rollIn animated" data-wow-delay="0.3s">
					<img src="images/index/index-five-1.png">
				</a>
				<div class="index-five-list-r">
					<!-- 第一个内容块1 -->
					<div v-for="(item, i) in products" :key="item.id" class="index-five-tab wow flipInY animated" :data-wow-delay="`${0.2 + i/10}s`">
						<a href="#">
							<img :src="pics[i] && pics[i].img" class="w-100">
						</a>
						<div class="index-five-tab-name">
							<span>{{item.index_title}}</span>
						</div>
						<div class="index-five-tab-price">
							<span>￥</span>
							<span>{{item.index_price}}</span>
						</div>
						<div class="index-five-tab-volume">
							<span>销量:</span>
							<span>{{item.count}}</span></div>
						<a href="javascript:;" class="index-five-tab-car">
							<img src="images/index/index-five-tab-car.png" class="w-100">
						</a>
						<!-- 购物车隐藏部分1 -->
						<div class="index-five-tab-tc">
							<div class="index-five-tab-tc1">
								<span>￥</span>
								<span>{{item.index_price}}</span>
							</div>
							<div class="index-five-tab-tc2 text-center">
								<div class="clearfix" v-for="item in sizes" :key="item">
									<a href="javascript:;">{{item}}磅</a>
									<!-- <img src="images/index/seven_7.png" alt=""> -->
								</div>
							</div>
							<div class="index-five-tab-tc3">
								<a href="#">加入购物车</a>
								<a href="#">立即购买</a>
							</div>
							<i class="index-five-tab-tc4 iconfont icon-chahao"></i>
						</div>
						<!-- 购物车隐藏部分2 -->
					</div>
					<!-- 第一个内容块2 -->
					
					<div class="clearfix "></div>
				</div>
				<div class="clearfix"></div>
			</div>
			<!-- 3极致精选内容2 -->
			<!-- 第一个视频推介1 -->
			<div class="product-video wow zoomIn animated " data-wow-delay="0.4s">
				<video autoplay loop src="images/video/1080P童年水果覆盆子树莓.mp4" ></video>
			</div>
			<!-- 第一个视频推介2 -->
			<!-- 4中部banner2-1 -->
			<div class="active-banner wow fadeInLeft animated" data-wow-delay="0.3s">
				<a href="#">
					<img src="images/index/73695233867459470.jpg" alt="">
				</a>
			</div>
			<!-- 4中部banner2-2 -->
			<!-- 5匠心原创开始 -->
			<!-- 5匠心原创1 -->
			<div class="index-five-title">
				<div class="index-five-title-l wow fadeInLeft animated" data-wow-delay="0.4s">匠心·原创</div>
				<div class="index-five-title-r wow fadeInRight animated" data-wow-delay="0.5s"><a href="#">查看更多</a></div>
				<div class="clearfix"></div>
			</div>
			<!-- 5匠心原创2 -->
			<!-- 5匠心原创内容1 -->
			<home-one></home-one>
			<!-- 5匠心原创内容2 -->
			<!-- 5匠心原创结束 -->
			<!-- 第二个轮播图开始 -->
			<!-- 第二个轮播图结束 -->
			<!-- 6中部banner3-1 -->
			<div class="active-banner wow fadeInRight animated" data-wow-delay="0.6s">
				<a href="#">
					<img src="images/index/73695233867459470.jpg" alt="">
				</a>
			</div>
			<!-- 6中部banner3-2 -->
			<!-- 7网红爆款开始1 -->
			<!-- 7网红爆款1 -->
			<div class="index-five-title">
				<div class="index-five-title-l wow fadeInLeft animated" data-wow-delay="0.7s">网红·爆款</div>
				<!-- <div class="index-five-title-r"><a href="#">查看更多</a></div> -->
				<div class="clearfix"></div>
			</div>
			<!-- 7网红爆款2 -->
			<!-- 7网红爆款内容区域1 -->
			<div class="index-five-list-r hotProduct">
				<!-- 第一个内容块1 -->
				<div class="index-five-tab wow rotateInUpLeft" data-wow-delay="0.3s">
					<a href="#">
						<img src="images/index/极地牛乳.png" class="w-100">
					</a>
					<div class="index-five-tab-name">
						<span>极地牛乳</span>
					</div>
					<div class="index-five-tab-price">
						<span>￥</span>
						<span>218.00</span>
					</div>
					<div class="index-five-tab-volume">
						<span>销量:</span>
						<span>5465454</span></div>
					<a href="javascript:;" class="index-five-tab-car">
						<img src="images/index/index-five-tab-car.png" class="w-100">
					</a>
					<!-- 购物车隐藏部分1 -->
					<div class="index-five-tab-tc">
						<div class="index-five-tab-tc1">
							<span>￥</span>
							<span>218.00</span>
							<span>/</span>
							<span>1.2磅</span>
						</div>
						<div class="index-five-tab-tc2 text-center">
							<div class="clearfix">
								<a href="javascript:;">1.2磅</a>
								<!-- <img src="images/index/seven_7.png" alt=""> -->
							</div>
							<div class="clearfix">
								<a href="javascript:;">2.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">3.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">7.2磅</a>
							</div>
						</div>
						<div class="index-five-tab-tc3">
							<a href="#">加入购物车</a>
							<a href="#">立即购买</a>
						</div>
						<i class="index-five-tab-tc4 iconfont icon-chahao"></i>
					</div>
					<!-- 购物车隐藏部分2 -->
				</div>
				<!-- 第一个内容块2 -->
				<!-- 第一个内容块1 -->
				<div class="index-five-tab wow rotateInUpRight" data-wow-delay="0.4s">
					<a href="#">
						<img src="images/index/极地牛乳.png" class="w-100">
					</a>
					<div class="index-five-tab-name">
						<span>极地牛乳</span>
					</div>
					<div class="index-five-tab-price">
						<span>￥</span>
						<span>218.00</span>
					</div>
					<div class="index-five-tab-volume">
						<span>销量:</span>
						<span>5465454</span></div>
					<a href="javascript:;" class="index-five-tab-car">
						<img src="images/index/index-five-tab-car.png" class="w-100">
					</a>
					<!-- 购物车隐藏部分1 -->
					<div class="index-five-tab-tc">
						<div class="index-five-tab-tc1">
							<span>￥</span>
							<span>218.00</span>
							<span>/</span>
							<span>1.2磅</span>
						</div>
						<div class="index-five-tab-tc2 text-center">
							<div class="clearfix">
								<a href="javascript:;">1.2磅</a>
								<!-- <img src="images/index/seven_7.png" alt=""> -->
							</div>
							<div class="clearfix">
								<a href="javascript:;">2.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">3.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">7.2磅</a>
							</div>
						</div>
						<div class="index-five-tab-tc3">
							<a href="#">加入购物车</a>
							<a href="#">立即购买</a>
						</div>
						<i class="index-five-tab-tc4 iconfont icon-chahao"></i>
					</div>
					<!-- 购物车隐藏部分2 -->
				</div>
				<!-- 第一个内容块2 -->
				<!-- 第一个内容块1 -->
				<div class="index-five-tab wow rotateInUpLeft" data-wow-delay="0.5s">
					<a href="#">
						<img src="images/index/极地牛乳.png" class="w-100">
					</a>
					<div class="index-five-tab-name">
						<span>极地牛乳</span>
					</div>
					<div class="index-five-tab-price">
						<span>￥</span>
						<span>218.00</span>
					</div>
					<div class="index-five-tab-volume">
						<span>销量:</span>
						<span>5465454</span></div>
					<a href="javascript:;" class="index-five-tab-car">
						<img src="images/index/index-five-tab-car.png" class="w-100">
					</a>
					<!-- 购物车隐藏部分1 -->
					<div class="index-five-tab-tc">
						<div class="index-five-tab-tc1">
							<span>￥</span>
							<span>218.00</span>
							<span>/</span>
							<span>1.2磅</span>
						</div>
						<div class="index-five-tab-tc2 text-center">
							<div class="clearfix">
								<a href="javascript:;">1.2磅</a>
								<!-- <img src="images/index/seven_7.png" alt=""> -->
							</div>
							<div class="clearfix">
								<a href="javascript:;">2.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">3.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">7.2磅</a>
							</div>
						</div>
						<div class="index-five-tab-tc3">
							<a href="#">加入购物车</a>
							<a href="#">立即购买</a>
						</div>
						<i class="index-five-tab-tc4 iconfont icon-chahao"></i>
					</div>
					<!-- 购物车隐藏部分2 -->
				</div>
				<!-- 第一个内容块2 -->
				<!-- 第一个内容块1 -->
				<div class="index-five-tab wow rotateInUpRight" data-wow-delay="0.6s">
					<a href="#">
						<img src="images/index/极地牛乳.png" class="w-100">
					</a>
					<div class="index-five-tab-name">
						<span>极地牛乳</span>
					</div>
					<div class="index-five-tab-price">
						<span>￥</span>
						<span>218.00</span>
					</div>
					<div class="index-five-tab-volume">
						<span>销量:</span>
						<span>5465454</span></div>
					<a href="javascript:;" class="index-five-tab-car">
						<img src="images/index/index-five-tab-car.png" class="w-100">
					</a>
					<!-- 购物车隐藏部分1 -->
					<div class="index-five-tab-tc">
						<div class="index-five-tab-tc1">
							<span>￥</span>
							<span>218.00</span>
							<span>/</span>
							<span>1.2磅</span>
						</div>
						<div class="index-five-tab-tc2 text-center">
							<div class="clearfix">
								<a href="javascript:;">1.2磅</a>
								<!-- <img src="images/index/seven_7.png" alt=""> -->
							</div>
							<div class="clearfix">
								<a href="javascript:;">2.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">3.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">7.2磅</a>
							</div>
						</div>
						<div class="index-five-tab-tc3">
							<a href="#">加入购物车</a>
							<a href="#">立即购买</a>
						</div>
						<i class="index-five-tab-tc4 iconfont icon-chahao"></i>
					</div>
					<!-- 购物车隐藏部分2 -->
				</div>
				<!-- 第一个内容块2 -->
				<div class="clearfix "></div>
			</div>
			<!-- 7网红爆款内容区域2 -->
			<!-- 7网红爆款开始2 -->
			<!-- 8中部banner4-1 -->
			<div class="active-banner wow flipInX animated" data-wow-delay="0.3s">
				<a href="#">
					<img src="images/index/73695233867459470.jpg" alt="">
				</a>
			</div>
			<!-- 8中部banner4-2 -->
			<!-- 9猜您喜欢开始1 -->
			<!-- 9猜您喜欢标题部分1 -->
			<div class="index-five-title">
				<div class="index-five-title-l">猜您·喜欢</div>
				<!-- <div class="index-five-title-r"><a href="#">查看更多</a></div> -->
				<div class="clearfix"></div>
			</div>
			<!-- 9猜您喜欢标题部分2 -->
			<!-- 9猜您喜欢内容区域1 -->
			<div class="index-five-list-r hotProduct">
				<!-- 第一个内容块1 -->
				<div class="index-five-tab wow flipInX" data-wow-delay="0.3s">
					<a href="#">
						<img src="images/index/极地牛乳.png" class="w-100">
					</a>
					<div class="index-five-tab-name">
						<span>极地牛乳</span>
					</div>
					<div class="index-five-tab-price">
						<span>￥</span>
						<span>218.00</span>
					</div>
					<div class="index-five-tab-volume">
						<span>销量:</span>
						<span>5465454</span></div>
					<a href="javascript:;" class="index-five-tab-car">
						<img src="images/index/index-five-tab-car.png" class="w-100">
					</a>
					<!-- 购物车隐藏部分1 -->
					<div class="index-five-tab-tc">
						<div class="index-five-tab-tc1">
							<span>￥</span>
							<span>218.00</span>
							<span>/</span>
							<span>1.2磅</span>
						</div>
						<div class="index-five-tab-tc2 text-center">
							<div class="clearfix">
								<a href="javascript:;">1.2磅</a>
								<!-- <img src="images/index/seven_7.png" alt=""> -->
							</div>
							<div class="clearfix">
								<a href="javascript:;">2.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">3.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">7.2磅</a>
							</div>
						</div>
						<div class="index-five-tab-tc3">
							<a href="#">加入购物车</a>
							<a href="#">立即购买</a>
						</div>
						<i class="index-five-tab-tc4 iconfont icon-chahao"></i>
					</div>
					<!-- 购物车隐藏部分2 -->
				</div>
				<!-- 第一个内容块2 -->
				<!-- 第一个内容块1 -->
				<div class="index-five-tab wow flipInY" data-wow-delay="0.4s">
					<a href="#">
						<img src="images/index/极地牛乳.png" class="w-100">
					</a>
					<div class="index-five-tab-name">
						<span>极地牛乳</span>
					</div>
					<div class="index-five-tab-price">
						<span>￥</span>
						<span>218.00</span>
					</div>
					<div class="index-five-tab-volume">
						<span>销量:</span>
						<span>5465454</span></div>
					<a href="javascript:;" class="index-five-tab-car">
						<img src="images/index/index-five-tab-car.png" class="w-100">
					</a>
					<!-- 购物车隐藏部分1 -->
					<div class="index-five-tab-tc">
						<div class="index-five-tab-tc1">
							<span>￥</span>
							<span>218.00</span>
							<span>/</span>
							<span>1.2磅</span>
						</div>
						<div class="index-five-tab-tc2 text-center">
							<div class="clearfix">
								<a href="javascript:;">1.2磅</a>
								<!-- <img src="images/index/seven_7.png" alt=""> -->
							</div>
							<div class="clearfix">
								<a href="javascript:;">2.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">3.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">7.2磅</a>
							</div>
						</div>
						<div class="index-five-tab-tc3">
							<a href="#">加入购物车</a>
							<a href="#">立即购买</a>
						</div>
						<i class="index-five-tab-tc4 iconfont icon-chahao"></i>
					</div>
					<!-- 购物车隐藏部分2 -->
				</div>
				<!-- 第一个内容块2 -->
				<!-- 第一个内容块1 -->
				<div class="index-five-tab wow flipInX" data-wow-delay="0.5s">
					<a href="#">
						<img src="images/index/极地牛乳.png" class="w-100">
					</a>
					<div class="index-five-tab-name">
						<span>极地牛乳</span>
					</div>
					<div class="index-five-tab-price">
						<span>￥</span>
						<span>218.00</span>
					</div>
					<div class="index-five-tab-volume">
						<span>销量:</span>
						<span>5465454</span></div>
					<a href="javascript:;" class="index-five-tab-car">
						<img src="images/index/index-five-tab-car.png" class="w-100">
					</a>
					<!-- 购物车隐藏部分1 -->
					<div class="index-five-tab-tc">
						<div class="index-five-tab-tc1">
							<span>￥</span>
							<span>218.00</span>
							<span>/</span>
							<span>1.2磅</span>
						</div>
						<div class="index-five-tab-tc2 text-center">
							<div class="clearfix">
								<a href="javascript:;">1.2磅</a>
								<!-- <img src="images/index/seven_7.png" alt=""> -->
							</div>
							<div class="clearfix">
								<a href="javascript:;">2.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">3.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">7.2磅</a>
							</div>
						</div>
						<div class="index-five-tab-tc3">
							<a href="#">加入购物车</a>
							<a href="#">立即购买</a>
						</div>
						<i class="index-five-tab-tc4 iconfont icon-chahao"></i>
					</div>
					<!-- 购物车隐藏部分2 -->
				</div>
				<!-- 第一个内容块2 -->
				<!-- 第一个内容块1 -->
				<div class="index-five-tab wow flipInY" data-wow-delay="0.6s">
					<a href="#">
						<img src="images/index/极地牛乳.png" class="w-100">
					</a>
					<div class="index-five-tab-name">
						<span>极地牛乳</span>
					</div>
					<div class="index-five-tab-price">
						<span>￥</span>
						<span>218.00</span>
					</div>
					<div class="index-five-tab-volume">
						<span>销量:</span>
						<span>5465454</span></div>
					<a href="javascript:;" class="index-five-tab-car">
						<img src="images/index/index-five-tab-car.png" class="w-100">
					</a>
					<!-- 购物车隐藏部分1 -->
					<div class="index-five-tab-tc">
						<div class="index-five-tab-tc1">
							<span>￥</span>
							<span>218.00</span>
							<span>/</span>
							<span>1.2磅</span>
						</div>
						<div class="index-five-tab-tc2 text-center">
							<div class="clearfix">
								<a href="javascript:;">1.2磅</a>
								<!-- <img src="images/index/seven_7.png" alt=""> -->
							</div>
							<div class="clearfix">
								<a href="javascript:;">2.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">3.2磅</a>
							</div>
							<div class="clearfix">
								<a href="javascript:;">7.2磅</a>
							</div>
						</div>
						<div class="index-five-tab-tc3">
							<a href="#">加入购物车</a>
							<a href="#">立即购买</a>
						</div>
						<i class="index-five-tab-tc4 iconfont icon-chahao"></i>
					</div>
					<!-- 购物车隐藏部分2 -->
				</div>
				<!-- 第一个内容块2 -->
				<div class="clearfix "></div>
			</div>
			<!-- 9猜您喜欢内容区域2 -->
			<!-- 9猜您喜欢开始2 -->
		</div>
		<!-- 大灰色背景部分2 -->
	</div>
	<!-- 轮播图下区域2 -->
	<!-- 主体结束 -->
  </div>
</template>

<script>
import axios from 'axios'
import homeOne from './Home-one'  //引入子组件匠心原创内容一
export default {
  data() {
    return {
      shopList: [],
      sizes: ['1.2', '2.2', '3.2', '7.2'],
      products: [],
      pics: []
    }
  },
  methods: {
    getData() {
      axios.get(
        `http://localhost:3000/index`,
        { params: { status: 1 } }
      ).then(({data}) => {
        this.products = data.product
        return Promise.all(
          data.product.map(item => {
            return axios.get(
              `http://localhost:3000/pics?pid=${item.car_id}`
            ).then(({data}) => data)
          })
        )
      }).then(values => {
        this.pics = values.map(_ => _.pics[0])
        console.log(this.pics)
      })
    }
	},
	// 注册子组件
	components:{
"home-one":homeOne
	},
  created() {
    this.getData()
  },
  mounted() {
    // <!-- 设置小点点的动态开始 -->
	
		var i = 0;
		var LIWIDTH = 972;
		var DURATION = 500;
		var LICOUNT = 4;
		var ulImgs = this.$el.querySelector('#ul-imgs');
		var ulIdxs = document.getElementById("ul-idxs");
		var lis = ulIdxs.children;

		const moveTo = to => {
			if (to == undefined) {
				to = i + 1;
			}
			if (i == 0) {
				if (to > i) {
					ulImgs.className = "transition";
				} else {
					ulImgs.className = "";
					ulImgs.style.marginLeft = -LIWIDTH * LICOUNT + "px";
					setTimeout(function () {
						moveTo(LICOUNT - 1);
					}, 100);
					return;
				}
			}
			i = to;
			ulImgs.style.marginLeft = -i * LIWIDTH + "px";
			for (var li of lis) {
				li.className = ""
			}
			// console.log(i);
			if (i == LICOUNT) {
				i = 0;
				setTimeout(function () {
					ulImgs.className = "";
					ulImgs.style.marginLeft = 0;
				}, DURATION)
			}
			lis[i].className = "active";
		}

	// <!-- 轮播图设置小点点的动态结束 -->
	// <!-- 轮播图设置左右两边的箭头开始 -->
	
		var btnLeft = document.getElementById("btn-left");
		var btnRight = document.getElementById("btn-right");
		var canClick = true;
		btnLeft.onclick = function () {
			move(1)
		}

		function move(n) {
			if (canClick) {
				// console.log(i+n);
				moveTo(i + n);
				canClick = false;
				setTimeout(function () {
					canClick = true;
				}, DURATION + 100);
			}
		}
		btnRight.onclick = function () {
			move(-1);
		}
	
	// <!-- 轮播图设置左右两边的箭头结束 -->
	// <!-- 轮播图设置鼠标放到图片开始 -->

		var interval = 3000;
		var timer = setInterval(function () {
			moveTo()
		}, 3000);
		var banner = document.getElementById("banner");
		banner.onmouseover = function () {
			clearInterval(timer);
		}
		banner.onmouseout = function () {
			timer = setInterval(function () {
				moveTo()
			}, 3000);
		}

	// <!-- 轮播图设置鼠标放到图片结束 -->
	
		var ulIdxs = document.getElementById("ul-idxs");
		var canClick = true;
		ulIdxs.onclick = function (e) {
			if (canClick) {
				var li = e.target;
				if (li.nodeName == "LI") {
					if (li.className !== "active") {
						for (var i = 0; i < lis.length; i++) {
							if (lis[i] == li) {
								break;
							}
						}
						moveTo(i);
						setTimeout(function () {
							canClick = true;
						}, DURATION);
					}
				}
			}
		}

	// <!-- 轮播图JS结束 -->
		if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
			new WOW().init();
		};
	
	// <!-- 引入头部1 -->
  }
}
</script>
